import { Header } from '~/components/Header';
import { Menu } from 'antd';
import { Link, useLocation } from '@remix-run/react';
import {
  DashboardOutlined,
  BookOutlined,
  AppstoreOutlined,
  FileTextOutlined,
} from '@ant-design/icons';

export function MainLayout({ children }: { children: React.ReactNode }) {
  const location = useLocation();

  const menuItems = [
    {
      key: '/dashboard',
      icon: <DashboardOutlined />,
      label: <Link to="/dashboard">仪表盘</Link>,
    },
    {
      key: '/questions',
      icon: <FileTextOutlined />,
      label: <Link to="/questions">题目管理</Link>,
    },
    {
      key: '/knowledge',
      icon: <BookOutlined />,
      label: <Link to="/knowledge">知识点管理</Link>,
    },
    {
      key: '/categories',
      icon: <AppstoreOutlined />,
      label: <Link to="/categories">分类管理</Link>,
    },
  ];

  return (
    <div className="min-h-screen flex flex-col">
      <Header />
      <div className="flex-1 flex">
        <div className="w-64 bg-white shadow-sm">
          <Menu
            mode="inline"
            selectedKeys={[location.pathname]}
            items={menuItems}
            className="h-full border-r"
            style={{ height: 'calc(100vh - 64px)' }}
          />
        </div>
        <main className="flex-1 p-6 bg-gray-50">
          {children}
        </main>
      </div>
    </div>
  );
}